<template>
  <cloudPage>
    <cloudHeader slot="gHeader">
      <view class="grace-header-body" style="background:rgb(52, 58, 69)">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view class="grace-header-content-noflex grace-text-center font-32">{{
          $t("my.bankAccount.add_account")
        }}</view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons"></view>
      </view>
    </cloudHeader>
    <view class="gbody main">
      <view
        v-if="bankType == 'bank'"
        class="head-tips font-22 bold-500 color-g6"
      >
        {{ $t("my.bankAccount.headTips") }}
      </view>
      <view class="fromData">
        <!-- 添加银行卡 -->
        <view class="grace-form" v-if="bankType == 'bank'">
          <view class="form">
            <view class="grace-form-item grace-flex grace-space-between">
              <view class="font-24 bold-500 color-b1" style="width:160rpx;">{{
                $t("my.bankAccount.card_holder_name")
              }}</view>
              <view class="grace-form-body1">
                <input
                  type="text"
                  class="grace-form-input font-24 bold-500 color-b"
                  placeholder-class="color-grey"
                  :placeholder="
                    $t('my.bankAccount.placeholder.input_card_holder_name')
                  "
                  v-model="bankForm.true_name"
                />
              </view>
            </view>
            <view class="grace-form-item grace-flex grace-space-between">
              <view class="font-24 bold-500 color-b1" style="width:160rpx;">{{
                $t("my.bankAccount.bank_card_number")
              }}</view>
              <view class="grace-form-body1">
                <input
                  type="text"
                  class="grace-form-input font-24 bold-500 color-b"
                  placeholder-class="color-grey"
                  :placeholder="
                    $t('my.bankAccount.placeholder.input_bank_card_number')
                  "
                  v-model="bankForm.account"
                  @blur="getBankcardinfo"
                />
              </view>
            </view>
            <view class="grace-form-item grace-flex grace-space-between">
              <view class="font-24 bold-500 color-b1" style="width:160rpx;">{{
                $t("my.bankAccount.card_bank")
              }}</view>
              <view class="font-24 bold-500 color-b">{{
                bankForm.cardBankName
              }}</view>
            </view>
            <view class="grace-form-item grace-flex grace-space-between">
              <view class="font-24 bold-500 color-b1" style="width:160rpx;">{{
                $t("my.bankAccount.sub_branch")
              }}</view>
              <view class="grace-form-body1">
                <input
                  type="text"
                  class="grace-form-input font-24 bold-500 color-b"
                  placeholder-class="color-grey"
                  :placeholder="
                    $t('my.bankAccount.placeholder.input_sub_branch')
                  "
                  v-model="bankForm.cardSubBankName"
                />
              </view>
            </view>
          </view>
        </view>
        <!-- 支付宝/微信 -->
        <view
          class="grace-form"
          v-if="bankType == 'alipay' || bankType == 'wechat'"
        >
          <view class="form">
            <view class="grace-form-item grace-flex">
              <cloudIcon name="iconrenwu-ren" class="font-32"></cloudIcon>
              <view class="grace-form-body">
                <input
                  type="text"
                  class="grace-form-input font-24 bold-500 color-b align-left"
                  placeholder-class="color-grey"
                  :placeholder="
                    bankType == 'alipay'
                      ? $t('my.bankAccount.placeholder.input_apilay_account')
                      : $t('my.bankAccount.placeholder.input_wechat_account')
                  "
                  v-model="bankForm.account"
                />
              </view>
            </view>
            <view class="grace-form-item grace-flex">
              <cloudIcon name="iconbianxie" class="font-40"></cloudIcon>
              <view class="grace-form-body">
                <input
                  type="text"
                  class="grace-form-input font-24 bold-500 color-b align-left"
                  placeholder-class="color-grey"
                  :placeholder="
                    $t('my.bankAccount.placeholder.input_true_name')
                  "
                  v-model="bankForm.true_name"
                />
              </view>
            </view>

            <view class="mt-40 grace-flex grace-flex-vcenter">
              <cloudIcon
                :name="
                  bankType == 'alipay' ? 'iconzhifubao' : 'iconweixindenglu'
                "
                style="font-size:46rpx;"
                :style="{ color: bankType == 'alipay' ? '#35b4fd' : '#44c900' }"
              ></cloudIcon>
              <view
                class="ml-20 font-24 bold-500 color-b1"
                style="line-height: 40rpx;"
                >{{
                  bankType == "alipay"
                    ? $t("common.title.alipay")
                    : $t("common.title.wechat")
                }}{{ $t("my.bankAccount.receipt_Qrcode") }}</view
              >
            </view>
            <view class="mt-40 grace-flex grace-flex-center">
              <view
                class="qrcode grace-flex grace-flex-center grace-flex-vcenter"
                v-if="bankForm.url == ''"
                @tap.stop="onTapChooseImage"
              >
                <view class="grace-columns grace-flex-vcenter">
                  <cloudIcon
                    name="iconerweima"
                    class="font-60 color-w"
                    style="text-align:center;"
                  ></cloudIcon>
                  <view style="color: #FFFFFF;">{{
                    $t("my.bankAccount.upload_Qrcode")
                  }}</view>
                </view>
              </view>
              <view v-else class="grace-flex grace-flex-center"
                ><image
                  :src="bankForm.url"
                  style="width: 255rpx; height: 380rpx;"
                  mode="widthFix"
                ></image
              ></view>
            </view>
            <view class="mt-40 font-20 bold-500 color-g9 mb-20">{{
              label
            }}</view>
          </view>
        </view>
      </view>
      <!-- 风险提示 -->
      <view v-if="bankType == 'bank'" class="risk_tips font-22 bold-500">{{
        $t("my.bankAccount.risk_tips")
      }}</view>
      <!-- 底部按钮 -->
      <view
        class="grace-columns grace-flex-vcenter fixed-view"
        @tap.stop="bankAdd"
      >
        <view
          class="grace-flex grace-flex-vcenter grace-flex-center font-24 tips"
          style="color:#343A45;"
          v-if="bankType == 'bank'"
        >
          <text>{{ $t("my.bankAccount.agreement") }}</text>
        </view>
        <button
          :loading="loading['user.bank.save']"
          class="grace-flex grace-flex-vcenter grace-flex-center btn-default"
        >
          <text class="font-28 color-w">{{ $t("common.operate.sure") }}</text>
        </button>
      </view>
    </view>
  </cloudPage>
</template>

<script>
var graceChecker = require("@/graceUI/jsTools/graceChecker.js");
import { getBankInfo } from "@/utils/bank";
import { scanQrcode } from "@/utils/qrcode";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      bankType: "",
      bankForm: {
        account: "", // 银行卡号/账户名
        true_name: "", // 真实姓名
        url: "", // 收款码图片地址
        text: "", // 收款码解析内容
        cardBankName: "", // 银行名称
        cardSubBankName: "" // 所属支行
      }
    };
  },
  computed: {
    label() {
      return this.$t("my.bankAccount.qrcode_tips");
    }
  },
  onLoad({ bankType }) {
    this.bankType = bankType;
  },
  methods: {
    ...mapActions("media", ["upload"]),
    ...mapActions("user", ["saveUserBank"]),
    // 获取银行卡号所属银行信息
    getBankcardinfo() {
      getBankInfo(this.bankForm.account)
        .then(data => {
          this.bankForm.cardBankName = data.bankName;
        })
        .catch(err => {
          console.log(err);
          this.bankForm.cardBankName = "";
          this.makeToast({ title: $t("my.bankAccount.bank_card_number_fail") });
        });
    },
    // 上传收款码
    onTapChooseImage() {
      uni.chooseImage({
        count: 1,
        sourceType: ["album"],
        sizeType: ["compressed"],
        success: async images => {
          let resText = "";
          let img = images.tempFilePaths[0];
          try {
            resText = await scanQrcode(img);
            this.bankForm.text = resText;
          } catch (e) {
            this.makeToast({ title: e });
          }
          if (resText) {
            if (
              this.bankType == "alipay" &&
              !resText.toLowerCase().includes("qr.alipay.com")
            ) {
              this.makeToast({ title: this.$t("my.bankAccount.qrcode_fail") });
              return;
            } else if (
              this.bankType == "wechat" &&
              !resText.toLowerCase().includes("wxp")
            ) {
              this.makeToast({ title: this.$t("my.bankAccount.qrcode_fail") });
              return;
            }
            let res = await this.upload(images);
            if (res.statusCode == 200) {
              this.bankForm.url = res.url;
            }
          }
        },
        complete: function(met) {
          console.log(met);
        }
      });
    },
    // 添加账户
    async bankAdd() {
      let value = {};
      let rule = [];
      let bankForm = this.bankForm;
      if (this.bankType == "wechat" || this.bankType == "alipay") {
        rule = [
          {
            name: "account",
            checkType: "notnull",
            errorMsg: this.$t("my.bankAccount.tips.account_name_not_null")
          },
          {
            name: "true_name",
            checkType: "notnull",
            errorMsg: this.$t("my.bankAccount.tips.true_name_not_null")
          },
          {
            name: "url",
            checkType: "notnull",
            errorMsg: this.$t("my.bankAccount.upload_Qrcode")
          }
        ];
        value = {
          account: bankForm.account,
          true_name: bankForm.true_name,
          url: bankForm.url,
          text: bankForm.text
        };
      } else {
        rule = [
          {
            name: "account",
            checkType: "notnull",
            errorMsg: this.$t("my.bankAccount.tips.bank_card_number_not_null")
          },
          {
            name: "true_name",
            checkType: "notnull",
            errorMsg: this.$t("my.bankAccount.tips.true_name_not_null")
          },
          {
            name: "cardBankName",
            checkType: "notnull",
            errorMsg: this.$t("my.bankAccount.tips.bank_card_number_not_right")
          },
          {
            name: "cardSubBankName",
            checkType: "notnull",
            errorMsg: this.$t("my.bankAccount.tips.sub_branch_not_null")
          }
        ];
        value = {
          account: bankForm.account,
          true_name: bankForm.true_name,
          bank_name: bankForm.cardBankName,
          sub_bank_name: bankForm.cardSubBankName
        };
      }
      var checkRes = graceChecker.check(bankForm, rule);
      if (!checkRes) {
        this.makeToast({ title: graceChecker.error, icon: "none" });
        return false;
      }
      let params = {
        bank: this.bankType,
        value: value
      };

      const res = await this.saveUserBank(params);
      this.makeToast({
        title: this.$t("common.tips.added_success"),
        icon: "none"
      });
      Object.keys(bankForm).forEach(item => {
        bankForm[item] = "";
      });
      this.bankForm = bankForm;
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  }
};
</script>

<style scoped>
.align-left {
  text-align: left;
}
.bold-500 {
  font-weight: 500;
}
.head-tips {
  margin: 40rpx 45rpx 0rpx 60rpx;
}
.risk_tips {
  margin: 0rpx 45rpx 0rpx 60rpx;
  color: #d18314;
}
.fromData {
  margin: 30rpx 40rpx;
  background: #ffffff;
  box-shadow: 0px 1rpx 10rpx 0px rgba(102, 102, 102, 0.1);
  border-radius: 20rpx;
}
.form {
  padding: 10rpx 30rpx;
}
.grace-form .grace-form-item {
  height: 95rpx;
  line-height: 95rpx;
  border-bottom: 1rpx solid #eeeeee;
}
.grace-form .grace-form-item:last-child {
  border-bottom: 0;
}
.grace-form .grace-form-item .grace-form-body {
  width: 100%;
}
.grace-form .grace-form-item .grace-form-body .grace-form-input,
.grace-form .grace-form-item .grace-form-body1 .grace-form-input {
  padding: 0rpx 10rpx;
  height: 95rpx;
  line-height: 95rpx;
  margin: 0;
  width: auto;
}
.grace-form .grace-form-item .grace-form-body1 .grace-form-input {
  text-align: right;
}
.fixed-view {
  position: fixed;
  bottom: 115rpx;
  width: 100%;
}
.fixed-view .tips {
  width: 650rpx;
  margin-bottom: 65rpx;
}
.btn-default {
  background: #343a45;
  border-radius: 36px;
  width: 600rpx;
  height: 80rpx;
}
.qrcode {
  width: 255rpx;
  height: 380rpx;
  background: rgba(33, 50, 65, 0.6);
  position: relative;
}
</style>
